<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>
</head>
<body>
//第一步：在页面中提供ul元素，设置样式class="ztree" ,给出ID方便找到元素<br>

//第二步：通过变量 setting设置属性<br>

//第三步：构建ztree需要数据格式（两种1、标准   2、简单）<br>

//第四步：调用ztree对象初始化方法创建树<br>
<hr>
//使用ztree 标准json数据格式  关键点：通过children指定子节点
<ul id="ztree1" class="ztree"></ul>	
<script type="text/javascript">
	//配置ztree属性
	var setting1 = {};//使用默认值
	var nodes1 =[
	             {"id":1,"name":"节点一",children:[{"id":101,"name":"节点二",children:[{"id":201,"name":"节点三"}]}]}
	             ];
	//p1:用于展现 zTree 的 DOM 容器  p2:zTree 的配置数据 p3:zTree 的节点数据
	$.fn.zTree.init($("#ztree1"), setting1, nodes1);
</script>

<hr>
//使用ztree 简单json数据格式  关键点：通过pId指定上级节点
<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
	var setting2 = {
		data: {
			simpleData: {
				enable: true, //开启简单数据模式
				idKey: "id",  //通过id属性指定节点标识
				pIdKey: "pId",//通过pId属性指定上级节点
				rootPId: 0,   //根节点（顶级节点）上级ID为0
			}
		}
	};
	var nodes2 = [{"id":1,"name":"节点一","pId":101},{"id":101,"name":"节点二","pId":103},{"id":103,"name":"节点三","pId":0}]
	$.fn.zTree.init($("#ztree2"), setting2, nodes2);
</script>
</body>
</html>